<template>
	<view>
		<form action="">
			<!-- 顶部标题 -->
			<!-- <view class="head_text">
				<text v-if="editId">编辑客户</text>
				<text v-else>新增客户</text>
				<image src="../../static/client/back.png"
					style="width: 20rpx;height: 36rpx;position: absolute;left: 30rpx;top: 63rpx;" @click="back()">
				</image>
			</view> -->
			<!-- 客户信息 -->
			<view class="client_info">
				<view class="info_title">
					<text style="margin-left: 59rpx;">客户信息</text>
					<view
						style="width: 6rpx;height: 42rpx;background: #40A0F2;position: absolute;top: 30rpx;left: 30rpx;">
					</view>
				</view>
				<view class="info_item">
					<text>客户名称</text>
					<input style="margin-left: 199rpx;position: absolute;top: 28rpx;" placeholder="单行输入"
						v-model="addFormData.customer_name"
						placeholder-style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #999999;" />
				</view>
				<view class="info_item" @click="ShowClientType()">
					<text>客户类型</text>
					<text class="client_type">{{client_type_name}}</text>
					<image src="/static/client/xiala.png" class="info_img" mode=""></image>
				</view>
				<view class="info_item" @click="ShowClientNature()">
					<text>客户性质</text>
					<text class="client_type">{{client_nature_name}}</text>
					<image src="/static/client/xiala.png" class="info_img" mode=""></image>
				</view>
				<view class="info_item_bottom">
					<text>业务类型</text>
					<checkbox-group @change="handleChange" name="" class="check_group">
						<label v-for="item in projectTypeList">
							<checkbox :value="item.project_type_id" :checked="item.checked" style="margin-left: 20rpx;"
								class="check_item" />
							<text>{{item.project_type_name}}</text>
						</label>
					</checkbox-group>
				</view>
				<view class="info_item" style="margin-top: 80rpx;">
					<text>客户来源</text>
					<input style="margin-left: 199rpx;position: absolute;top: 28rpx;" placeholder="请填写客户来源"
						v-model="addFormData.source"
						placeholder-style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #999999;" />
				</view>
				<view class="info_item">
					<text>客户描述</text>
					<input style="margin-left: 199rpx;position: absolute;top: 28rpx;" placeholder="请填写客户描述"
						v-model="addFormData.describe"
						placeholder-style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #999999;" />
				</view>
				<!-- 客户类型下拉 -->
				<view class="client_type_change" v-if="isShowClientType">
					<view class="item_info" :class="addFormData.type ==item.id? 'currentType':''"
						v-for="item in client_type" :key='item.id' @tap="changeClientType(item)">
						<text style="margin-left: 21rpx;">{{item.name}}</text>
					</view>
				</view>
				<!-- 客户性质下拉 -->
				<view class="client_type_change" style="top:385rpx" v-if="isShowClientNature">
					<view class="item_info" :class="addFormData.is_company ==item.id? 'currentType':''"
						v-for="item in client_nature" :key='item.id' @tap="changeClientNature(item)">
						<text style="margin-left: 21rpx;">{{item.name}}</text>
					</view>
				</view>
			</view>

			<!-- 添加联系人 -->
			<view class="client_info" style="border-bottom: 1rpx solid #F7F7F7; height: 102rpx;">
				<view class="info_title">
					<text style="margin-left: 59rpx;">联系人信息</text>
					<view
						style="width: 6rpx;height: 42rpx;background: #40A0F2;position: absolute;top: 30rpx;left: 30rpx;">
					</view>
					<view class="add_linkman" @click="addLinkMan()">
						添加联系人
					</view>
				</view>
			</view>
			<!-- 联系人信息 -->
			<view class="client_info" style="height: 380rpx;" v-for="item in contactsList">
				<view class="info_item">
					<text>联系人</text>
					<input style="margin-left: 199rpx;position: absolute;top: 28rpx;" placeholder="请填写联系人"
						v-model="item.name"
						placeholder-style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #999999;" />
				</view>
				<view class="info_item">
					<text>电话</text>
					<input style="margin-left: 199rpx;position: absolute;top: 28rpx;" placeholder="请填写联系人电话"
						v-model="item.phone"
						placeholder-style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #999999;" />
				</view>
				<view class="info_item">
					<text>职位</text>
					<input style="margin-left: 199rpx;position: absolute;top: 28rpx;" placeholder="请填写联系人职位"
						v-model="item.charege"
						placeholder-style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #999999;" />
				</view>
				<view class="info_item">
					<text>微信</text>
					<input style="margin-left: 199rpx;position: absolute;top: 28rpx;" placeholder="请填写联系人微信"
						v-model="item.wx"
						placeholder-style="font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #999999;" />
				</view>
			</view>

			<!-- 其他信息 -->
			<view class="client_info" style="height: 462rpx;">
				<view class="info_title">
					<text style="margin-left: 59rpx;">其他信息</text>
					<view
						style="width: 6rpx;height: 42rpx;background: #40A0F2;position: absolute;top: 30rpx;left: 30rpx;">
					</view>
				</view>
				<view
					style="margin-top: 49rpx;margin-left: 31rpx;font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #333333;">
					备注
				</view>
				<textarea v-model="addFormData.remark" class="textar" maxlength="-1" auto-height="true"/>
			</view>
			<!-- 底部按钮 -->
			<view class="bottom">
				<button class="bottom_btn" style="background: #CCCCCC; width: 380rpx;" form-type="reset">取消</button>
				<button class="bottom_btn"
					style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
					v-if="!editId" @click="handleSubmitAdd" form-type="submit">确定</button>
				<button class="bottom_btn"
					style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
					v-else @click="handleSubmitEdit" form-type="submit">编辑</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				editId: '',
				token: '',
				member_id: '',
				company_id: '',
				projectTypeList: [],
				isShowClientType: false, //控制客户类型选择是否显示
				isShowClientNature: false, //控制客户性质选择是否显示
				client_type_name: '普通客户',
				client_nature_name: '个人',
				link_man: [1], //通过添加数组来添加联系人
				contactsList: [{
					name: '',
					phone: '',
					charege: '',
					wx: '',
				}, ],
				addFormData: {
					customer_name: '',
					project_type_id: [],
					type: '0',
					is_company: '0',
					source: '',
					describe: '',
					remark: '',
					contacts: '',
				},

				client_type: [ //客户类型
					{
						id: '0',
						style: '',
						name: '普通客户',
					},
					{
						id: '1',
						style: '',
						name: '高级客户'
					},
					{
						id: '2',
						style: '',
						name: 'VIP客户'
					}
				],

				client_nature: [ //客户性质
					{
						id: '0',
						style: '',
						name: '个人'
					},
					{
						id: '1',
						style: '',
						name: '公司'
					},

				]
			}
		},
		onShow() {
			// this.getProjectType()
		},
		async onLoad(options) {
			this.token = uni.getStorageSync('btlh_process_token') || ''
			this.member_id = uni.getStorageSync('btlh_process_member_id') || ''
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || ''
			this.editId = options.clientId || ''
			this.getProjectTypeList()
			if (this.editId) {
				setTimeout(() => {
					this.getClientDetails()
				})
			}
		},
		methods: {
			// 如果有客户id(获取详情)
			async getClientDetails() {
				this.addFormData = {}
				const {
					data: res
				} = await this.$myRequest({
					url: 'Customer/detail',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,

						customer_id: this.editId,

					},

				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				this.addFormData = res.datas.info
				// 处理业务类型
				this.addFormData.project_type_id.forEach(item => {
					this.projectTypeList.forEach(items => {
						if (item == items.project_type_id) {
							items.checked = true
						}
					})
				})
				// 处理联系人
				this.contactsList = []
				this.addFormData.contacts.forEach((item) => {
					this.contactsList.push({
						name: item.split('-')[0],
						phone: item.split('-')[1],
						charege: item.split('-')[2],
						wx: item.split('-')[3],
					})
				})
				// 处理 客户性质  客户类型
				if (this.addFormData.is_company == 0) {
					this.client_nature_name = '个人'
				} else if (this.addFormData.is_company == 1) {
					this.client_nature_name = '公司'
				}
				if (this.addFormData.type == 0) {
					this.client_type_name = '普通客户'
				} else if (this.addFormData.type == 1) {
					this.client_type_name = '高级客户'
				} else if (this.addFormData.type == 2) {
					this.client_type_name = 'VIP客户'
				}
				console.log('客户详情', this.addFormData)
			},
			// 点击编辑提交
			async handleSubmitEdit() {
				console.log('123', this.addFormData)
				if (this.addFormData.customer_name.trim().length <= 0)
					return uni.showToast({
						title: '请填写客户名称',
						icon: 'none'
					})
				if (this.addFormData.project_type_id.length <= 0)
					return uni.showToast({
						title: '请选择业务类型',
						icon: 'none'
					})
				if (this.addFormData.type == '')
					return uni.showToast({
						title: '请选择客户类型',
						icon: 'none'
					})
				if (this.addFormData.is_company == '')
					return uni.showToast({
						title: '请选择客户性质',
						icon: 'none'
					})

				let arr = []
				this.contactsList.forEach((item, index) => {
					if (
						item.name.trim().length <= 0 &&
						item.phone.trim().length <= 0 &&
						item.charege.trim().length <= 0 &&
						item.wx.trim().length <= 0 &&
						index != 0
					) {
						return
					} else {
						arr.push(
							item.name + '-' + item.phone + '-' + item.charege + '-' + item.wx
						)
					}

				})
				this.addFormData.contacts = JSON.stringify(arr)
				console.log(this.addFormData)
				const {
					data: res
				} = await this.$myRequest({
					url: 'Customer/edit',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						customer_id: this.editId,

						customer_name: this.addFormData.customer_name,
						project_type: this.addFormData.project_type_id.join(','),
						type: this.addFormData.type,
						is_company: this.addFormData.is_company,
						source: this.addFormData.source,
						describe: this.addFormData.describe,
						remark: this.addFormData.remark,
						contacts: this.addFormData.contacts,

					},

				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				uni.switchTab({
					url: '/pakageMessage//pages/client/client'
				})
			},
			// 点击添加提交
			async handleSubmitAdd() {
				if (this.addFormData.customer_name.trim().length <= 0)
					return uni.showToast({
						title: '请填写客户名称',
						icon: 'none'
					})
				if (this.addFormData.project_type_id.length <= 0)
					return uni.showToast({
						title: '请选择业务类型',
						icon: 'none'
					})
				if (this.addFormData.type == '')
					return uni.showToast({
						title: '请选择客户类型',
						icon: 'none'
					})
				if (this.addFormData.is_company == '')
					return uni.showToast({
						title: '请选择客户性质',
						icon: 'none'
					})

				let arr = []
				this.contactsList.forEach((item, index) => {
					if (
						item.name.trim().length <= 0 &&
						item.phone.trim().length <= 0 &&
						item.charege.trim().length <= 0 &&
						item.wx.trim().length <= 0 &&
						index != 0
					) {
						return
					} else {
						arr.push(
							item.name + '-' + item.phone + '-' + item.charege + '-' + item.wx
						)
					}

				})
				this.addFormData.contacts = JSON.stringify(arr)
				console.log(this.addFormData)
				const {
					data: res
				} = await this.$myRequest({
					url: 'Customer/add',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,

						customer_name: this.addFormData.customer_name,
						project_type: this.addFormData.project_type_id.join(','),
						type: this.addFormData.type,
						is_company: this.addFormData.is_company,
						source: this.addFormData.source,
						describe: this.addFormData.describe,
						remark: this.addFormData.remark,
						contacts: this.addFormData.contacts,

					},

				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				uni.switchTab({
					url: '/pakageMessage//pages/client/client'
				})
			},
			// 获取项目类型
			async getProjectTypeList() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Project/project_type',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,

					},

				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				this.projectTypeList = res.datas.listInfo
				console.log('项目类型', this.projectTypeList)
			},
			handleChange(e) {
				// console.log(this.addFormData.project_type_id)
				console.log(this.projectTypeList)
				console.log('e', e.detail.value)
				this.addFormData.project_type_id = e.detail.value
			},
			/* 
			 添加联系人
			 */
			addLinkMan() {

				this.contactsList.push({
					name: '',
					phone: '',
					charege: '',
					wx: '',
				})
			},
			/* 
			 点击选择客户性质
			 */
			changeClientNature(item) {
				this.client_nature_name = item.name
				this.addFormData.is_company = item.id
				console.log('选择客户性质', this.addFormData.is_company)
				console.log(this.addFormData)
				this.isShowClientNature = false
			},
			/*
			 点击显示客户性质
			 */
			ShowClientNature(item) {
				this.isShowClientNature = !this.isShowClientNature
				this.isShowClientType = false
			},
			/* 
			 点击选择客户类型
			 */
			changeClientType(item) {
				this.client_type_name = item.name
				this.addFormData.type = item.id
				console.log('选择客户类型', this.addFormData.type)
				console.log(this.addFormData)
				this.isShowClientType = false
			},
			/* 
			 显示客户类型选择
			 */
			ShowClientType() {
				this.isShowClientType = !this.isShowClientType
				this.isShowClientNature = false
			},
			/* 
			 获取业务类型
			 */
			getProjectType() {
				const res = this.$myRequest({
					url: '/Project/project_type'
				})
				console.log(res)
			},
			/* 
			点击左上返回按钮 
			 */
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.bottom {
		width: 100%;
		height: 88rpx;
	}

	.bottom_btn {
		width: 375rpx;
		height: 88rpx;
		margin-left: 0;
		border-radius: 0;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.textar {
		width: 605rpx;
		height: 300rpx;
		background: #F7F7F7;
		margin-top: -55rpx;
		margin-left: 115rpx;
	}

	.add_linkman {
		width: 170rpx;
		height: 54rpx;
		background: #40A0F2;
		border-radius: 27rpx;
		position: absolute;
		top: 24rpx;
		right: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 54rpx;
		text-align: center;

	}

	.client_type_change {
		width: 550rpx;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: absolute;
		top: 290rpx;
		right: 25rpx;
		z-index: 999;

		.item_info {
			width: 100%;
			height: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 60rpx;
		}
	}

	.client_info {
		width: 100%;
		height: 780rpx;
		border-bottom: 19rpx solid #E9E9E9;

		.info_title {
			width: 100%;
			height: 102rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			border-bottom: 1px solid #E9E9E9;
			line-height: 102rpx;
			position: relative;
		}

		.info_item_bottom {
			width: 690rpx;
			height: auto;
			margin-left: 30rpx;
			line-height: 94rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			position: relative;

			.check_group {
				position: absolute;
				top: 5rpx;
				left: 140rpx;
				font-size: 26rpx;

				.check_item {
					transform: scale(0.7);
				}
			}
		}

		.info_item {
			width: 690rpx;
			height: 94rpx;
			border-bottom: 1px solid #E9E9E9;
			margin-left: 30rpx;
			line-height: 94rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			position: relative;

			.client_type {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				margin-left: 85rpx;
			}

			.info_img {
				width: 25rpx;
				height: 13rpx;
				position: absolute;
				top: 45rpx;
				right: 20rpx;
			}
		}
	}

	.head_text {
		width: 100%;
		height: 128rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 160rpx;
		text-align: center;
		border-bottom: 19rpx solid #F7F7F7;
	}

	.currentType {
		background: #40A0F2;
		color: #FFFFFF;
		border-radius: 10px 10px 0 0;
	}
</style>
